<template>
  <div>
    <el-select placeholder="请选择区域" v-model="value" @change="changeSelect">
      <el-option v-for="item in areaName" :value="item" :label="item"></el-option>
    </el-select>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        areaName: [],
        value: ''
      }
    },
    methods: {
      getAreaName() {
        return new Promise((resolve, reject) => {
          this.$http.get('/area/name').then(response => {
            this.areaName = response.data;
            // 这里return的值作为参数，传递到下一个回调函数
            return this.areaName;
          }).then(name => {
            // 默认选择数组的第一项作为参数进行展示
            this.value = name[0];
            this.$emit('myChange', this.value);
          }).catch(err => {
            console.log(err)
          }).catch(err => {
            console.log(err)
          })
        })
      },
      // 下拉框改变所触发的事件
      changeSelect(item) {
        // 子组件向父组件传递参数item，使用$emit
        this.$emit("myChange", item);
      }
    },
    created() {
      this.getAreaName();
    },
    mounted() {


    }
  }
</script>

<style>

</style>
